<template>
  <el-dialog
    :close-on-click-modal="false"
    :before-close="cancel"
    :visible="visible"
    :title="$t('vip.vip7')"
    width="650px"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="130px"
    >
      <el-form-item :label="$t('vip.vip7')" prop="password">
        <el-input v-model="ruleForm.password" />
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      v-if="checkPermission(['account@update'])"
    >
      <el-button type="info" plain @click="cancel">{{
        $t("common.common1")
      }}</el-button>
      <el-button
        :loading="submitLoading"
        type="primary"
        plain
        @click="submit('ruleForm')"
      >
        {{ $t("common.common2") }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { updateItem } from "@/api/vip/vip";
export default {
  data() {
    return {
      visible: false,
      submitLoading: false,
      ruleForm: { password: "" },
      rowID: "",
      rules: {
        password: [
          // 密码不能为空
          {
            required: true,
            message: this.$t("common.common16"),
            trigger: "blur",
          },
          {
            pattern: /^(?!(?:[0-9]+|[a-zA-Z]+|[!-\/:-@\[-`{-~]+)$)[!-~]{8,16}$/,
            message: this.$t("common.common17"),
            // 请输入8~16位字母和数字和字符的密码
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    init(rowID) {
      this.rowID = rowID;
      this.visible = true;
    },
    cancel() {
      this.visible = false;
      this.ruleForm = { password: "" };
      this.$refs.ruleForm.resetFields();
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // `是否确认重置用户密码?`, "提示",
          this.$confirm(this.$t("vip.vip18"), this.$t("common.common5"), {
            confirmButtonText: this.$t("common.common2"),
            cancelButtonText: this.$t("common.common1"),
            type: "warning",
          })
            .then(() => {
              this.submitLoading = true;
              updateItem(this.rowID, {
                password: this.ruleForm.password,
              })
                .then((res) => {
                  this.submitLoading = false;
                  if (res.code == 10000) {
                    this.cancel();
                    this.$parent.getList();
                  }
                })
                .catch((error) => {
                  this.$message.error(error.Error);
                });
            })
            .catch(() => {});
        }
      });
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
